<template>
	<div class="g_row">
		<div class="m_profile">
			<div class="g_row">
				<div class="left" @click="toPersonalInfo">
					<van-image class="avatar" width="71px" height="71px" round :src="userStore.userInfo.headImg ? userStore.userInfo.headImg  : 'https://img.yzcdn.cn/vant/cat.jpeg'" />
					<div class="info">
						<div class="nickname"> {{ userStore.userInfo.nickName ? userStore.userInfo.nickName : '未登录' }}</div>
						<span class="membershipLevel">普通用户</span>
					</div>
				</div>
				<div class="right">
					<i class="icon_normal"></i>
					<div class="m_supermcEntrance">
						<i class="u_icon"></i>
						<div class="word">
							<div class="line1">Pro会员</div>
							<div class="line2">
								立即开通
								<van-icon name="arrow" class="u_icon_arrow" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="m_myAsset">
			<div class="mc">我的资产</div>
			<div class="assetList">
				<div class="assetItem">
					<p class="assetCount">
						<span class="unit">¥</span>
						<span class="value">
							0
							<span class="reddot"></span>
						</span>
					</p>
					<p class="assetName">余额</p>
				</div>
				<div class="assetItem">
					<p class="assetCount">
						<span class="value">
							0
						</span>
					</p>
					<p class="assetName">余额</p>
				</div>
				<div class="assetItem">
					<p class="assetCount">
						<span class="value">
							0
						</span>
					</p>
					<p class="assetName">余额</p>
				</div>
				<div class="assetItem">
					<p class="assetCount">
						<span class="value">
							0
						</span>
					</p>
					<p class="assetName">余额</p>
				</div>
				<div class="assetItem">
					<p class="assetCount">
						<span class="value">
							0
						</span>
					</p>
					<p class="assetName">余额</p>
				</div>
			</div>
		</div>
		<div class="card_wrap">
			<div class="card">
				<div class="content">
					<div class="seven_min_card"></div>
					<div class="art_word"></div>
					<div class="text">&nbsp;|</div>
				</div>
				<button class="time_limit">&nbsp;限时开通 &nbsp;</button>
			</div>
		</div>
		<div class="g_row">
			<van-grid column-num="3">
				<van-grid-item icon="completed" text="我的订单" />
				<van-grid-item icon="user-circle-o" text="账号管理" />
				<van-grid-item icon="phone-o" text="我的手机号" />
				<van-grid-item icon="calendar-o" text="周六一起拼" />
				<van-grid-item icon="cash-on-deliver" text="售后服务" />
				<van-grid-item icon="envelop-o" text="邀请返利" />
				<van-grid-item icon="bag-o" text="优先购" />
				<van-grid-item icon="gold-coin-o" text="积分中心" />
				<van-grid-item icon="vip-card-o" text="会员俱乐部" />
				<van-grid-item icon="location-o" text="地址管理" />
				<van-grid-item icon="refund-o" text="支付安全" />
				<van-grid-item icon="service-o" text="帮助与客服" />
				<van-grid-item icon="comment-o" text="意见反馈" />
				<van-grid-item icon="balance-list-o" text="我的竞拍" />
				<van-grid-item icon="" text="" />
			</van-grid>
		</div>
		<div class="btn_wrap">
			<van-button block class="quit_btn" @click="logoutHandle">退出登录</van-button>
		</div>
		<Tabbar></Tabbar>
	</div>
</template>

<script setup lang="ts">
import router from '@/router';
import useUserStore from '@/stores/user';
import { showFailToast, showSuccessToast } from 'vant';
function toPersonalInfo() {
    router.push('/personalInfo')
}

const userStore = useUserStore()


// 事件回调
const logoutHandle = async () => {
	try {
		await userStore.logout()
    showSuccessToast('退出登录成功')
		router.push('/login')
	} catch (error) {
		console.log(error);
		showFailToast('退出登录失败')
	}
}


</script>

<style scoped lang="less">
.g_row {
	display: block;
	// background-color: #f4f4f4;

	.m_profile {
		height: 135px;
		width: 360px;
		background-image: url(//yanxuan.nosdn.127.net/5905098f74e04c39fa5e76ebb9ff591b.png);
		background-size: 100%;
		background-position: bottom;
		padding-left: 15px;
		overflow: hidden;

		.g_row {
			display: flex;
			align-items: center;

			.left {
				width: 240.5px;
				height: 135px;
				align-items: center;
				-webkit-box-align: center;
				display: flex;

				.info {
					flex: 1;
					-webkit-box-flex: 1;
					margin-left: 15px;
					line-height: 1;
					overflow: hidden;

					.nickname {
						color: white;
						font-size: 18px;
						line-height: 18px;
						text-align: left;
						margin-bottom: 5px;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.membershipLevel {
						color: white;
						font-size: 14px;
					}
				}
			}

			.right {
				position: relative;
				width: 119.5px;
				height: 94px;
				padding-left: 8.5px;

				.icon_normal {
					position: absolute;
					right: 5.25px;
					top: 6px;
					vertical-align: middle;
					background-size: 187.5px 168.75px;
					display: inline-block;
					height: 32px;
					width: 32px;
					background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/ucenter-11eb865ad061b2dd08d2ec54d87461d6.png);
				}

				.m_supermcEntrance {
					display: flex;
					height: 42px;
					width: 111px;
					padding: 0 10px 0 5px;
					margin-top: 52.5px;
					white-space: nowrap;
					border-top-left-radius: 24px;
					border-bottom-left-radius: 24px;
					overflow: hidden;
					background-color: black;

					.u_icon {
						display: inline-block;
						height: 28px;
						width: 28px;
						margin: 7px 4.5px;
						background-size: 180px 160px;
						background-position: -34px -40px;
						background-image: url(//yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/ucenter-11eb865ad061b2dd08d2ec54d87461d6.png);
					}

					.word {
						padding: 5px 0;

						.line1 {
							font-size: 12px;
							line-height: 13.5px;
							margin-bottom: 5px;
							color: #f9e0c0;
						}

						.line2 {
							font-size: 12px;
							line-height: 10.5px;
							vertical-align: middle;
							color: #f9e0c0;

							.u_icon_arrow {
								display: inline-block;
								margin: -2px 0 0 2px;
								height: 9px;
								width: 9px;
							}

						}
					}
				}
			}
		}
	}

	.m_myAsset {
		background-color: #fff;
		width: 375px;
		height: 142.5px;

		.mc {
			width: 360px;
			height: 52.5px;
			line-height: 52.5px;
			margin: 0 0 0 15px;
			color: #333;
			font-size: 14px;
			border-bottom: 1px solid #d9d9d9;
		}

		.assetList {
			display: flex;
			width: 375px;
			height: 80px;
			justify-content: space-between;
			text-align: center;

			.assetItem {
				width: 70.02px;
				padding-top: 16px;

				.assetCount {
					margin-bottom: 2px;

				}

				.unit {
					font-size: 12px;
				}

				.value {
					font-size: 16px;

					.reddot {
						position: absolute;
						height: 7px;
						width: 7px;
						border-radius: 50%;
						background-color: red;
					}
				}

				.assetName {
					font-size: 12px;
				}
			}
		}
	}

	.card_wrap {
		width: 355px;
		height: 45px;
		margin: -10px 0 10px;
		padding: 0 10px 10px 10px;
		background-color: #fff;


		.card {
			padding: 0 7.5px;
			display: flex;
			box-sizing: border-box;
			height: 45px;
			background-color: #fff6f4;
			border-radius: 6px;
			border: 1px solid rgba(221, 26, 33, .1);

			.content {
				display: flex;

				.seven_min_card {
					margin: 5px 0;
					height: 27px;
					width: 27px;
					margin-left: 2px;
					background-size: 30px 30px;
					background-image: url("https://yanxuan.nosdn.127.net/static-union/1679024383124f83.png");
				}

				.art_word {
					margin: 12px 0;
					height: 15px;
					width: 65px;
					margin-left: 4px;
					background-size: 65px 18px;
					background-image: url("https://yanxuan.nosdn.127.net/static-union/1679024383363de7.png");
				}

				.text {
					font-weight: 100;
					font-size: 12px;
					margin: 13px 0;
				}
			}

			.time_limit {
				height: 22px;
				color: #fff;
				padding: 0 5px;
				font-size: 12px;
				border: solid rgb(210, 0, 26) 1px;
				background-color: rgb(210, 0, 26);
				border-radius: 10px;
				margin: 10px 0 0 170px;
				line-height: 0px;
			}

		}

	}

	.btn_wrap {
		width: 375px;
		height: 48px;
		margin: 15px 0;

		.quit_btn {
			float: right;
			margin-left: auto;
		}
	}
}
</style>